<template>
  <div>App</div>
  <p>{{ count }}</p>
  <button @click="handleClick">按钮</button>
  <p>{{ name }}</p>
  <p>{{ age }}</p>
  <p>{{ countCN }}</p>
  <Child />
</template>

<script>
import {
  reactive,
  ref,
  computed,
  watch,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
import Child from "./Child.vue";

// 组合式composition和响应式reactive API

export default {
  name: "App",
  props: [],
  emits: [],
  setup() {
    // setup相当于beforeCreate created

    onMounted(() => {
      console.log("onMounted");
    });
    onUpdated(() => {
      console.log("onUpdated");
    });

    console.log("setup");

    // ref用来定义单个响应式数据
    const count = ref(0);

    // reactive用来定义多个响应式数据
    const state = reactive({
      name: "jack",
      age: 18,
      person: {},
    });

    // 定义计算属性
    // 定义只读的计算属性
    const countCN = computed(() => {
      return count.value + "次";
    });
    // 定义可读可写的计算属性
    // const xxx = computed({
    //   get() {},
    //   set(val) {}
    // });

    // 定义监视属性
    watch(
      count,
      (newVal, oldVal) => {
        console.log("watch触发了", newVal, oldVal);
      },
      {
        // deep: true,
        immediate: true,
      }
    );

    // 定义methods
    const handleClick = () => {
      count.value++;
    };

    // 暴露一个对象，对象中的内容组件可以直接this访问
    return {
      count,
      handleClick,
      ...state,
      countCN,
    };
  },
  components: {
    Child,
  },
};
</script>

<style scoped></style>
